<template>
  <div class="table1">
    
    <div class="btn-wrap">
      <a-button type="primary" style="margin-right: 15px;" @click="onEditForm()">添加</a-button>
      <a-button type="info" @click="download">导出</a-button>
    </div>
    <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="true" :loading="loading" :columns="columns"
      :dataSource="pageData" @selectedRow="onSelectedRow" @change="onTableChange">
      <!--操作-->
      <template slot="action" slot-scope="text, record">
        <a-button @click="onDetail(record)" type="link" style="padding:0;">查看</a-button>

        <a-button type="link" style="padding:0;margin-left: 10px;" @click="onEditForm(record)">编辑</a-button>
      </template>
    </z-table>
    <a-modal :title="addFormTitle" :visible="addFormVisible" @ok="onAddSubmit" @cancel="onAddFormCancel">
      <a-form-model ref="addForm" :model="addForm" :label-col="{span: 8}" :wrapper-col="{span: 16}">
          <a-form-model-item label="督导名称" prop="supervisorId" :rules="{required: true, message: '请选择督导', trigger: ['change']}">
            <a-select v-model="addForm.supervisorId" :disabled="addFormTitle == '编辑'">
              <a-select-option :value="item.id" v-for="item in memberList" :key="id">{{item.personnelName}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="服务对象满意度" prop="satisfaction" :rules="{required: true, message: '请选择服务对象满意度', trigger: ['change']}">
            <a-select v-model="addForm.satisfaction">
              <a-select-option :value="1">不满意</a-select-option>
              <a-select-option :value="2">一般</a-select-option>
              <a-select-option :value="3">满意</a-select-option>
              <a-select-option :value="4">非常满意</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="社工成长" prop="evalSocialWorkerImprovement" :rules="{required: true, message: '请输入社工成长', trigger: ['change']}">
            <a-input v-model="addForm.evalSocialWorkerImprovement"></a-input>
          </a-form-model-item>
          <a-form-model-item label="小组计划书设计" prop="evalPlanDesign" :rules="{required: true, message: '请输入小组计划书设计', trigger: ['change']}">
            <a-input v-model="addForm.evalPlanDesign"></a-input>
          </a-form-model-item>
          <a-form-model-item label="小组服务中的专业成长" prop="evalProfessionImprovement" :rules="{required: true, message: '请输入小组服务中的专业成长', trigger: ['change']}">
            <a-input v-model="addForm.evalProfessionImprovement"></a-input>
          </a-form-model-item>
          <a-form-model-item label="社工的专业反思情况" prop="evalProfessionIntrospection" :rules="{required: true, message: '请输入社工的专业反思情况', trigger: ['change']}">
            <a-input v-model="addForm.evalProfessionIntrospection"></a-input>
          </a-form-model-item>
          <a-form-model-item label="档案留存整理情况" prop="evalArchivesSaved" :rules="{required: true, message: '请输入档案留存整理情况', trigger: ['change']}">
            <a-input v-model="addForm.evalArchivesSaved"></a-input>
          </a-form-model-item>
          
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
  import { memberList } from '@/api/sjsk/activity/group/detail/mature/table1'
  import { getList, add, update, detail } from '@/api/sjsk/activity/group/detail/end/table5'
  import { gainAdministrators } from '@/api/sjsk/activity/common'
  import downloadXlsl from '../../downloadXlsx.js'
  export default {
    props: {
      detail: Object
    },
    data() {
      return {
        loading:false,
        pageFilter: {
          pageNo: 1,
          pageSize: 10
        },
        pageData: {},
        form: {},
        headerData: [],
        memberList: [],
        columns: [{
            title: '督导名称',
            dataIndex: 'supervisorName',
            width: 80,
            align: 'center',
            customRender: text => {
              return <j-ellipsis value={text} length={14} />
            }
          },
          
          {
              title: '提交情况',
              dataIndex: 'submitStatus',
              width: 80,
              align: 'center',
              customRender: text => {
                return <j-ellipsis value={text == 2 ? '已提交' : '未提交'} length={14} />
              }
          },
          {
              title: '提交时间',
              dataIndex: 'submitDate',
              width: 80,
              align: 'center',
              customRender: text => {
                return <j-ellipsis value={text } length={14} />
              }
          },
          {
            title: '操作',
            width: 120,
            align: 'center',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        addFormVisible: false,
        addFormTitle: '',
        addForm: {
           "evalProfessionIntrospection": "",
            "evalProfessionImprovement": "",
            "updateTime": "",
            "evalSocialWorkerImprovement": "",
            "satisfaction": '',
            "supervisorId": "",
            "evalArchivesSaved": "",
            "activityId": '',
            "evalPlanDesign": "",
        }
      }
    },
    created() {
      this.getMemberList()
      this.onQuery()
      this.addForm.activityId = this.$route.query.id
    },
    
    methods: {
      download() {
        downloadXlsl(this.$route.query.id, 12)
      },
      onEditForm(data) {
        if(data) {
          this.addFormTitle = '编辑'
          // this.addForm = data
          detail({supervisorEvalId: data.supervisorEvalId}).then(res => {
            this.addForm = res.result
          })
        } else {
          this.addFormTitle = '添加'
        }
        this.addFormVisible = true
      },
      getMemberList() {
        gainAdministrators(this.detail.createBy).then(res => {
          if(res.success) {
            this.memberList = [res.result.administrators]
            this.addForm.supervisorId = res.result.administrators.id
          }
        })
      },
      onQuery() {
        this.pageFilter.pageNo = 1
        this.refreshTable()
      },
      onSelectedRow(keys) {
        this.selectKeys = keys
        this.isDisabled = keys.length > 0 ? false : true
      },
      onTableChange(pagination, pageFilter, sorter) {
        let keyMap = {
          currentPage: 'pageNo'
        }
        let paginations = Object.keys(pagination).reduce((newData, key) => {
          let newKey = keyMap[key] || key
          newData[newKey] = pagination[key]
          return newData
        }, {})
        this.pageFilter = Object.assign({}, this.pageFilter, paginations)
        this.refreshTable()
      },
      refreshTable() {
        let form = Object.assign({}, this.queryParam, this.pageFilter)
        form.activityId = this.$route.query.id
        this.loading = true
        getList(form).then((res) => {
            if (res.success) {
              this.pageData = res.result
              this.loading = false
              this.$refs.table.onClearRowKeys()
            } else {
              this.loading = false
            }
          })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
      onAddSubmit() {
        const method = this.addFormTitle == '添加' ? add : update
        this.$refs.addForm.validate().then(res => {
          method(this.addForm).then(res => {
            if(res.success) {
              this.$message.success(res.message)
              this.onAddFormCancel()
              this.onQuery()
            } else {
              this.$message.error(res.message)
            }
          })
        })
      },
      onAddFormCancel() {
        this.addForm = {
           "evalProfessionIntrospection": "",
            "evalProfessionImprovement": "",
            "updateTime": "",
            "evalSocialWorkerImprovement": "",
            "satisfaction": '',
            "supervisorId": "",
            "evalArchivesSaved": "",
            "activityId": this.$route.query.id,
            "evalPlanDesign": "",
        }
        this.addFormVisible = false
      },
    }
  }
</script>

<style lang="less" scoped>
  .table1 {
    box-sizing: border-box;
    padding: 20px 30px;
    .btn-wrap{
      margin-bottom: 20px;
    }
  }
</style>
